<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<link rel="stylesheet" href="/resources/css/bootstrap.css?20141022">
<link rel="stylesheet" href="/resources/css/font-awesome.css">
<link rel="stylesheet" href="/resources/css/global-style.css?20150526">
<link rel="stylesheet" href="/resources/css/ionicons.min.css">
<link rel="stylesheet" href="/resources/css/bootstrap-select.min.css">
<link rel="stylesheet" href="/resources/css/recommended-styles.css">
<link rel="stylesheet" href="/resources/css/nprogress.css">
<link rel="stylesheet" href="/resources/css/jquery.emojiarea.css">
<link rel="stylesheet" href="/resources/iCheck/skins/square/blue.css">
<link ref="stylesheet" href="/resources/css/nanumbarungothic.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700italic,400" type="text/css">
<!--[if lt IE 9]>
	<script src="/resources/js/html5shiv.js"></script>
	<script src="/resources/js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
	.header{
		margin-bottom: 0;
		height:50px;
		background: #444;
		background: rgba(0,0,0,0.6);
		padding: 0 25px;
		width: 100%;
		position: relative;
		z-index: 100;
	}
	.header .header-nav{
		height: 50px;
		margin-bottom: 0!important;
		padding-left: 0;
		list-style: none;
	}
	.header .header-nav > .nav-icon{
		width: 48px;
		height: 50px;
		display: block;
		text-align: center;
		float: left;
		position: relative;
	}
	.header .header-nav > .nav-icon > a {
		color: #fff;
		width: 100%;
		height: 100%;
		display: block;
		padding-top: 5px;
		text-decoration: none!important;
	}
	.header .header-nav > .nav-icon > a > img{
		vertical-align: baseline;
	}
	.header .header-nav > .nav-icon.open > a{
		color: #ccc;
	}
	.header .header-nav > .nav-icon > a:hover{
		color: #ccc;
	}
	.header-left { float: left; }
	.header-right { float: right; }
	#modal-login > .form-control {
		position: relative;
		font-size: 16px;
		height: auto;
		padding: 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.btn-facebook{
   		background-color: #3C57A2;
   		color: #fff;
   	}
   	.btn-twitter{
   		background-color: #00ACED;
   		color: #fff;
   	}
   	.btn-kakao{
   		background-color: #ffde00;
   		color: #fff;
   	}
   	.btn-instagram{
   		background-color: #f9f3e8;
   		color: #483e33;
   	}
   	.btn-facebook:focus,
   	.btn-facebook:hover{
   		background-color: #314c96;
   		border-color: #2b4488;
   		color: #fff;
   	}
   	.btn-twitter:focus,
   	.btn-twitter:hover{
   		border-color: #0098d1;
   		background-color: #00a0dd;
   		color: #fff;
   	}
   	.btn-kakao:focus,
   	.btn-kakao:hover{
   		background-color: #f3d300;
   		border-color: #eacb00;
   		color: #fff;
   	}
   	.btn-instagram:focus,
   	.btn-instagram:hover{
   		background-color: #ede6da;
   		
   	}
   	.common-menu{
   		float: left;
   		padding: 10px 0;
   	}
	.common-menu > ul > li {
		margin: 12px 12px;
	}
	.common-menu > ul > li.on > a{
		color: #333;
	}
	.common-menu > ul > li > a{
		padding: 4px 8px;
		color: #6b6b6b;
		line-height: 1.428571429;
		text-decoration: none;
		text-shadow: none!important;
	}
	.common-menu > ul > li > a:hover{
		border-radius: 3px;
		background: #5BC0DE;
		color: #fff;
	}
	.common-menu-footer{
		background-color: #f5f5f5; padding: 11px 18px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; clear: both; white-space: nowrap;
	}
	.common-menu-footer ul{
		font-size: 13px;
		margin-bottom: 3px!important;
	}
	.header-search-form{
		margin-top: 8px;
	}
	.search-form button{
		border:0; background: transparent; position: absolute; top:0; right:0;font-size: 22px;color:#fff;
	}
	.search-form button:hover{
		color: #ccc;
	}
	.search-form{
		width: 40px;
		position: relative;
		padding: 4px 12px;
		padding-right: 30px;
		border-radius: 4px;
		height: 34px;
		-webkit-transition: all 0.7s ease 0s;
	    -moz-transition: all 0.7s ease 0s;
	    -o-transition: all 0.7s ease 0s;
	    transition: all 0.7s ease 0s;
	    overflow: hidden;
	    background: transparent;
	}
	.search-form.q-focus button{
		color: #666!important;
	}
	.q-focus{
		width: 220px;
		background: #fff;
	}
	#q{
		width: 180px;
		border:0;
		display:none;
		background: transparent;
	}
	/* .dropdown.open {
   		background: #fff;
	} */
	.logo{
		margin:0 auto;
		width: 95px;
		font-size: 24px;
		line-height: 20px;
		padding-top: 5px;
		text-align: center;
	}
	.m_logo{
		position: absolute;
		left: 50%;
		top: 10px;
		margin-left: -36.5px;
	}
	.menu-toggle {
		border:0;
		background: transparent!important;
		width:48px;
		height:48px;
		display:block;
		color: #fff!important;
	}
	.menu-toggle:focus,
	.menu-toggle:hover{
		color: #54301a;
	}
	.dropdown-common-sub {
		border-radius: 4px!important;
		width: 475px;
		top: 52px;
		padding: 0;
		border: 0!important;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.22)!important;
		-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.22)!important;
		opacity: 0;
		margin:-16px 0 0;
	}
	.dropdown-common-sub:before {
		position: absolute;
		top: -12px;
		left: 13px;
		display: inline-block;
		border-right: 12px solid transparent;
		border-bottom: 12px solid #e4e4e4;
		border-left: 12px solid transparent;
		content: '';
	}
	.dropdown-common-sub:after {
		position: absolute;
		top: -11px;
		left: 14px;
		display: inline-block;
		border-right: 11px solid transparent;
		border-bottom: 11px solid #ffffff;
		border-left: 11px solid transparent;
		content: '';
	}
	.official-menu > li{
		border-right: 1px solid #d8d8d8;
		padding-right: 10px;
		height: 13px;
		line-height: 100%;
		text-shadow: #fff 0 1px 3px;
	}
	.official-menu > li > a:hover{
		font-weight: bold;
		text-decoration: none;
	}
	#toproot-menu .active a{
		border-radius: 3px;
		background-color: #5BC0DE;
		color: #fff;
	}
	#colorPicker{
		height: 25px;
		margin-bottom: 7px;
	}
	#colorPicker > div{
		float: left;
		width: 25px;
		height: 25px;
		display: block;
		border: 1px solid #ccc;
		margin-right: 5px;
		margin-bottom: 5px;
		cursor: pointer;
	}
	.imageUpload{
		width: 100%;
		float: left;
		margin-bottom: 10px;
	}
	.imageUpload:after{
		content:"";
		clear:both;
		display:block;
		*zoom:1;
	}
	#imageUploadBtn{
		width: 85px;
		height: 85px;
		float: left;
		border: 1px dotted #ccc;
		position: relative;
		cursor: pointer;
		text-align: center;
		line-height: 80px;
		color: #ccc;
		font-size: 35px;
		overflow: hidden;
		padding: 0;
	}
	#imageUploadBtn > input{
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		opacity: 0;
		-ms-filter: 'alpha(opacity=0)';
		font-size: 300px;
		direction: ltr;
		cursor: pointer;
	}
	#imagePreview > div{
		width: 85px;
		height: 85px;
		float: left;
		border: 1px solid #ccc;
		overflow: hidden;
		margin-right: 6px;
		margin-bottom: 6px;
		padding: 0;
		cursor: move;
		position: relative;
		text-align: center;
	}
	#imagePreview > div > img{
		width: auto;
		height: 85px;
		vertical-align: top;
	}
	#imagePreview > div > i{
		position: absolute;
		right: 4px;
		top: 4px;
		cursor: pointer;
		text-shadow: #444 0 1px 1px;
		color: #fff;
		background-color: rgba(0,0,0,0.5);
		padding: 3px;
		border-radius: 4px;
		
	}
	#notification-list{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#notification-list li{
		padding-top: 6px;
		border-bottom: 1px solid #efefef;
		padding-bottom: 6px;
		position: relative;
	}
	#notification-list li:focus,
	#notification-list li:hover{
		background-color: #f5f5f5;
	}
	#notification-list li > a > span{
		display: inline-block;
    	height: 100%;
    	vertical-align: middle;
	}
	#notification-list .refer_profileImg{
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
	}
	#notification-list img{
		width: 35px;
		height: 35px;
	}
	#notification-list .refer_postImg{
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
	}
	#notification-list .noti_follow{
		position: absolute;
		right: 0;
		top: 20%;
		border: 1px solid #d5d5d5;
		border-radius: 3px;
		background-color: #fff;
		height: 30px;
		width: 51px;
		color: #4F8EF7;
		white-space: nowrap;
	}
	#notification-list .noti_follow.active{
		border: 0;
		background-color: #4F8EF7;
		color: #fff;
	}
	#notification-list .noti-content{
		display: block;
		padding: 9px 50px;
		word-break: break-all;
	}
	#notification-list .noti-date{
		margin-left: 8px;
		font-size: 11px;
		color: #cacaca;
	}
	.content-wrapper{
		width: 100%;
		margin: 0;
		min-width: 260px;
		position: relative;
	}
	.user-menu{
		box-shadow :0 3px 5px rgba(0, 0, 0, .175);
		border: 0 solid rgba(0,0,0,0.25);
		border-radius: 4px!important;
		opacity: 0;
		min-width: 140px;
		border-top:1px solid #ECECEC;
	}
	.user-menu > li > a{
		color: #414D55;
		text-align: left;
	}
	.user-menu > li > a > i { color: #666; margin-right:10px; }
	.user-menu:before{
		border-bottom: 10px solid #8899a6;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom-color: rgba(0,0,0,0.1);
		height: auto;
		width: auto;
		top: -10px;
		right: 5px;
		position: absolute;
		content: '';
	}
	.user-menu:after{
		border-bottom: 9px solid #fff;
		border-left: 9px solid transparent;
		border-right: 9px solid transparent;
		border-bottom-color: rgba(255,255,255,0.98);
		height: auto;
		width: auto;
		top: -9px;
		right: 6px;
		position: absolute;
		content: '';
	}
	.write-m-w > .emoji-wysiwyg-editor{
		min-height: 94px;
	}
	.write-message-popup{
		border: 1px solid #BCE8F1;
		background-color: #D9EDF7;
		padding: 6px 4px;
		border-radius: 4px;
		color: #31708f;
		margin-top: 6px;
		position: relative;		
	}
	.write-message-popup:before {
		position: absolute;
		top: -9px;
		left: 33px;
		display: inline-block;
		border-right: 9px solid transparent;
		border-bottom: 9px solid #BCE8F1;
		border-left: 9px solid transparent;
		content: '';
	}
	.write-message-popup:after {
		position: absolute;
		top: -8px;
		left: 33px;
		display: inline-block;
		border-right: 9px solid transparent;
		border-bottom: 9px solid #D9EDF7;
		border-left: 9px solid transparent;
		content: '';
	}
	.login-line { margin:10px auto;height:1px;width:90%;background-color:#e9e9e9;text-align: center;position:relative; }
	.input-label-text{ margin-left:6px; }
	.noti_badge { position: absolute; display: none; background-color: #FE6A50; border-radius:50%; color:#fff; padding:0 3px; font-size:12px; border:1px solid #fff; width: auto; min-width:22px; height:22px; text-align:center; line-height:150%; }
	.side-open { overflow: hidden; position: relative; }
</style>
    <div class="header">
   		<!-- PC환경에서 레이아웃  -->
   		<div class="hidden-xs">
   			<div class="header-nav header-left">
   				<div class="dropdown" id="common-menu" style="float:left;background:transparent;">
   					<button type="button" class="menu-toggle" data-toggle="dropdown" style="" title="메뉴">
	    				<i class="ion-navicon" style="font-size:28px;position:absolute;top:4px;left:16px;"></i>
		    		</button>
    				<div class="dropdown-menu dropdown-common-sub" role="menu" id="toproot-menu">
   						<div style="width: 130px; margin-left:15px;" class="common-menu">
            				<ul class="list-unstyled">
          						<c:if test="${userDto ne null}">
          							<li data-category="homefeed"><a href="/"><spring:message code="common.menu.homefeed"/></a></li>
          						</c:if>
          						<li data-category="all"><a href="/all"><spring:message code="common.menu.all"/></a></li>
          						<li data-category="hashtag"><a href="/hashtag"><spring:message code="common.menu.hashtag"/></a></li>
		    					<li data-category="color"><a href="/color"><spring:message code="common.menu.color"/></a></li>
		    					<li data-category="latest"><a href="/latest"><spring:message code="common.menu.latest"/></a></li>
		    					<li data-category="popularity" style="border-right:0;"><a href="/popularity"><spring:message code="common.menu.popularity"/></a></li>
		                    </ul>
              			</div>
   						<div style="width: 140px;" class="common-menu">
		                    <ul class="list-unstyled" style="width: 100%;">
		                    	<li data-category="womens"><a href="/womens"><strong><spring:message code="common.menu.w_all"/></strong></a></li>	                    	
		                    	<li data-category="womens/clothes"><a href="/womens/clothes"><spring:message code="common.menu.w_clothes"/></a></li>
		    					<li data-category="womens/footwear"><a href="/womens/footwear"><spring:message code="common.menu.w_footwear"/></a></li>
		    					<li data-category="womens/bag"><a href="/womens/bag"><spring:message code="common.menu.w_bag"/></a></li>
		    					<li data-category="womens/accessory"><a href="/womens/accessory"><spring:message code="common.menu.w_accessory"/></a></li>
		    					<li data-category="womens/beauty"><a href="/womens/beauty"><spring:message code="common.menu.w_beauty"/></a></li>
		                    </ul>
          				</div>
           				<div style="width: 140px;" class="common-menu">
           					<ul class="list-unstyled" style="width: 100%;">
		                    	<li data-category="mens"><a href="/mens"><strong><spring:message code="common.menu.m_all"/></strong></a></li>	                    	
		                    	<li data-category="mens/clothes"><a href="/mens/clothes"><spring:message code="common.menu.m_clothes"/></a></li>
		    					<li data-category="mens/footwear"><a href="/mens/footwear"><spring:message code="common.menu.m_footwear"/></a></li>
		    					<li data-category="mens/bag"><a href="/mens/bag"><spring:message code="common.menu.m_bag"/></a></li>
		    					<li data-category="mens/accessory"><a href="/mens/accessory"><spring:message code="common.menu.m_accessory"/></a></li>
		    					<li data-category="mens/beauty"><a href="/mens/beauty"><spring:message code="common.menu.m_beauty"/></a></li>
		                    </ul>
           				</div>
           				<div class="common-menu-footer">
           					<ul class="list-inline official-menu">
           						<li><a href="/company"><spring:message code="common.menu.about"/></a></li>
           						<li><a href="/notices"><spring:message code="common.menu.notice"/></a></li>
								<li><a href="/help"><spring:message code="common.menu.help"/></a></li>
								<li><a href="/terms"><spring:message code="common.menu.terms"/></a></li>
								<li><a href="/partner"><spring:message code="common.menu.partner"/></a></li>
								<li><a href="/business"><spring:message code="common.menu.business"/></a></li>
								<li style="border-right:0;"><a href="http://developers.faeple.com" target="_blank"><spring:message code="common.menu.developers"/></a></li>
           					</ul>
	            		</div>
					</div>
				</div>
				<div class="header-search-form" style="width: inherit; float:left;">
					<form action="/search/post" method="post">
						<div class="search-form" title="검색">
							<input type="text" id="q" name="q" value="${searchValue}" placeholder="<spring:message code="head.search"/>" title="검색">
							<button type="submit" onclick="if(document.getElementById('q').value == '') return false;"><i class="icon ion-ios-search-strong"></i></button>
						</div>
					</form>
				</div>
   			</div>
   			
   			<div class="header-nav header-right">
  				<c:if test="${!empty userDto}">
  					<div class="nav-icon">
  						<a href="/messages" title="<spring:message code="head.message"/>" id="messageBtn" style="padding-top:4px;">
  							<i class="ion-ios-chatbubble" style="font-size:25px;"></i>
  							<span class="noti_badge" style="left:23px; top:3px;" id="messageCount"></span>
  						</a>
  					</div>
	   				<div class="nav-icon">
	   					<a href="#" data-toggle="modal" data-target="#notifications-modal" id="notiBtn" title="<spring:message code="head.notifications"/>">
	   						<i class="ion-ios-bell" style="font-size:24px;"></i>
	   						<span class="noti_badge" style="left:23px; top:3px;" id="notiCount"></span>
	   					</a>
					</div>
	   				<div class="nav-icon">
	   					<a href="#" title="<spring:message code="head.upload"/>" data-toggle="modal" data-target="#write-dialog" data-backdrop="static"><i class="ion-camera" style="font-size:24px;"></i></a>
	   				</div>
	   				<div class="dropdown nav-icon" id="user-menu" style="width:70px;">
	   					<a data-target="#" class="dropdown-toggle" title="${userDto.name}" data-toggle="dropdown" style="padding-top: 8px;cursor:pointer;">
	   					<img id="displayProfileImage" style="border-radius: 4px;" src="/resources/upload/profile/thumbnail/${userDto.profileImage}" width="30px;" height="30px;">
	   					<span class="caret" style="display: inline;"></span>
	   					</a>
	   					<ul class="dropdown-menu user-menu" role="menu" style="left:-95px;">
	    					<li><a href="/${userDto.id}" id="settingUserId"><i class="glyphicon glyphicon-user"></i><spring:message code="head.menu.profile"/></a></li>
	    					<li><a href="/activity"><i class="fa fa-heart-o" style="color: #FF4040;"></i><spring:message code="head.menu.activity"/></a></li>
	    					<li><a href="/settings"><i class="fa fa-cog"></i><spring:message code="head.menu.settings"/></a></li>
	    					<c:if test="${userDto.group_type eq 'seller'}">
	    						<li><a href="/dashboard"><i class="fa fa-building"></i><spring:message code="head.menu.business"/></a></li>
	    					</c:if>
	    					<li><a href="#" onclick="logout()"><i class="fa fa-power-off"></i><spring:message code="head.menu.logout"/></a></li>
	    					<li class="divider"></li>
	    					<li><a href="/help"><i class="glyphicon glyphicon-flag"></i><spring:message code="head.menu.help"/></a></li>
	    					<li><a href="/feedback"><i class="fa fa-exclamation-triangle"></i><spring:message code="head.menu.feedback"/></a></li>
						</ul>
	   				</div>
  				</c:if>
  				<c:if test="${empty userDto}">
	   				<div style="margin-right: 15px;">
	   					<a style="color:#fff;line-height:50px;text-decoration:none;" href="#" title="<spring:message code="head.login"/>" data-toggle="modal" data-target="#login-dialog"><spring:message code="head.login"/></a>
	   				</div>
  				</c:if>
   			</div>
   			<div class="logo"><a href="/" title="홈"><img src="/resources/img/logo.png"></a></div>
   		</div>
   		<!-- 모바일 레이아웃 -->
    	<div class="visible-xs">
    		<button type="button" class="menu-toggle" id="mobile-menu" title="메뉴">
   				<i class="ion-navicon" style="font-size:28px;position:absolute;top:6px;left:16px;"></i>
    		</button>
	    	<c:if test="${empty userDto}">
	    		<a href="#" id="moblie-login-btn" style="right:0; top:5px; position: absolute; padding: 6px 12px;" title="<spring:message code='head.login'/>" data-toggle="modal" data-target="#login-dialog"><i class="icon ion-log-in" style="color:#fff; font-size:20px;"></i></a>
	    	</c:if>
	    	<c:if test="${!empty userDto}">
	    		<i id="mobileSearchBtn" class="ion-ios-search" style="color:#fff; font-size:23px;right:0; top:0; position: absolute; padding:10px 12px; cursor:pointer;" onclick="toggleMobileSearchButton()"></i>
	    	</c:if>
	    	<div class="m_logo"><a href="/" title="<spring:message code="common.home"/>"><img src="/resources/img/logo.png" width="73" height="30"></a></div>
   		</div> 
		<!----------------------------------------------------------------------->
    </div>
    
    <div id="mobileSearchForm">
    	<form action="/search/post" method="post">
			<div>
				<i class="ion-ios-search-strong" style="color:#989898; position: absolute; top:12px; left: 12px;font-size: 18px;"></i>
				<input type="search" style="border:0; border-radius:0!important; -webkit-border-radius:0!important; width: 100%; height: 35px; padding-left: 26px; background-color: #fff; -webkit-appearance:none; font-size:16px;" placeholder="해시태그 또는 사용자 검색">
			</div>
		</form>
    </div>
    <div id="mobileBackdrop">
    <div class="mobile-nav">
		<ul style="list-style: none; padding-left: 0; margin-bottom: 0;">
			<c:if test="${!empty userDto}">
				<li style="background:#666;">
					<a href="/${userDto.id}" style="padding:8px 0 12px 12px;"><img id="displayProfileImage" style="border-radius:50%;border:1px solid #fff;" src="/resources/upload/profile/thumbnail/${userDto.profileImage}" width="35px;" height="35px;"><span style="margin-left:8px;color:#fff;">${userDto.name}</span></a>
					<a href="/m_notifications" style="position:absolute;right:45px;top:0;padding:6px 6px;"><i class="ion-ios-bell" style="padding:0 8px;font-size:26px;color:#fff;"></i><span class="noti_badge" style="left:23px; top:3px;" id="notiCountM"></span></a>
					<span style="color:#7a7a7a;padding:0 6px;position: absolute; right:35px; top: 11px;">│</span>
					<div style="position:absolute;right:5px;top:-4px;padding:0 8px;" onclick="mobileNavHide();"><i class="ion-ios-close-empty" style="font-size:40px;color:#fff;"></i></div>
				</li>
				<li style="height:80px;">
					<div style="padding:0;height:100%;white-space:nowrap;">
						<a href="/m_writeForm" style="width:33%;height:100%;float:left;text-align:center;padding-top:6px;border-right:1px solid #F0F0F0;text-decoration:none!important;"><i class="ion-ios-camera-outline" style="padding:0 8px;font-size:24px;"></i><span style="display:block;">업로드</span></a>
						<a href="/m_messages" style="width:33%;height:100%;float:left;text-align:center;padding-top:6px;border-right:1px solid #F0F0F0;text-decoration:none!important;position:relative;"><i class="ion-ios-chatbubble-outline" style="padding:0 8px;font-size:24px;"></i><span style="display:block;">메시지</span><span class="noti_badge" style="right:23px; top:3px;" id="messageCountM"></span></a>
						<a href="/activity" style="width:33%;height:100%;float:left;text-align:center;padding-top:6px;text-decoration:none!important;"><i class="ion-ios-heart-outline" style="padding:0 8px;font-size:24px;"></i><span style="display:block;">활동</span></a>
					</div>
				</li>
<%-- 				<li class="mobile-sub-menu"><a href="/${userDto.id}"><i class="glyphicon glyphicon-user" style="margin-right:10px;"></i>프로필</a></li> --%>
<!-- 				<li class="mobile-sub-menu"><a href="/activity"><i class="fa fa-heart-o" style="margin-right:14px;"></i>활동</a></li> -->
<!-- 				<li class="mobile-sub-menu"><a href="/settings"><i class="fa fa-cog" style="margin-right:14px;"></i>계정설정</a></li> -->
<!-- 				<li class="mobile-sub-menu"><a href="#" onclick="logout()"><i class="fa fa-power-off" style="margin-right:14px;"></i>로그아웃</a></li> -->
			</c:if>
			<li class=""><a href="/hashtag"><i class="ion-pound" style="margin-right:12px;font-size:17px;"></i>해시태그<i class="ion-ios-arrow-right arrow"></i></a></li>
			<li class=""><a href="/latest"><i class="ion-ios-timer-outline" style="margin-right:14px;font-size:20px;"></i>최신<i class="ion-ios-arrow-right arrow"></i></a></li>
			<li class=""><a href="/popularity"><i class="ion-ios-star" style="margin-right:14px;font-size:20px;"></i>인기<i class="ion-ios-arrow-right arrow"></i></a></li>
			<li class=""><a href="/all"><i class="ion-ios-help" style="margin-right:14px;font-size:20px;"></i>랜덤<i class="ion-ios-arrow-right arrow"></i></a></li>
			<li class=""><a href="/color"><i class="ion-ios-color-filter-outline" style="margin-right:14px;font-size:20px;"></i>색상<i class="ion-ios-arrow-right arrow"></i></a></li>
			<li>
				<a href="#" onclick="categoryOpen(this);"><i class="ion-female" style="margin-right:15px;font-size:20px;padding:0 3px;"></i>여성스타일<i class="ion-ios-arrow-down arrow"></i></a>
				<ul class="hide category-list">
					<li class=""><a href="/womens"><i class="ion-minus arrow"></i>여성모든스타일</a></li>
					<li class=""><a href="/womens/clothes"><i class="ion-minus arrow"></i>여성의류</a></li>
					<li class=""><a href="/womens/footwear"><i class="ion-minus arrow"></i>여성신발</a></li>
					<li class=""><a href="/womens/bag"><i class="ion-minus arrow"></i>여성가방</a></li>
					<li class=""><a href="/womens/accessory"><i class="ion-minus arrow"></i>여성악세사리</a></li>
					<li class=""><a href="/womens/beauty"><i class="ion-minus arrow"></i>여성뷰티</a></li>
				</ul>
			</li>
			<li>
				<a href="#" onclick="categoryOpen(this);"><i class="ion-male" style="margin-right:14px;font-size:20px;"></i>남성스타일<i class="ion-ios-arrow-down arrow"></i></a>
				<ul class="hide category-list">
					<li class=""><a href="/mens"><i class="ion-minus arrow"></i>남성모든스타일</a></li>
					<li class=""><a href="/mens/clothes"><i class="ion-minus arrow"></i>남성의류</a></li>
					<li class=""><a href="/mens/footwear"><i class="ion-minus arrow"></i>남성신발</a></li>
					<li class=""><a href="/mens/bag"><i class="ion-minus arrow"></i>남성가방</a></li>
					<li class=""><a href="/mens/accessory"><i class="ion-minus arrow"></i>남성악세사리</a></li>
					<li class=""><a href="/mens/beauty"><i class="ion-minus arrow"></i>남성뷰티</a></li>
				</ul>
			</li>
			<li>
				<a href="#" onclick="categoryOpen(this);"><i class="ion-ios-more-outline" style="margin-right:14px;font-size:20px;"></i>서비스<i class="ion-ios-arrow-down arrow"></i></a>
				<ul class="hide category-list">
					<li class=""><a href="/company"><i class="ion-minus arrow"></i>소개</a></li>
					<li class=""><a href="/notices"><i class="ion-minus arrow"></i>공지사항</a></li>
					<li class=""><a href="/help"><i class="ion-minus arrow"></i>고객센터</a></li>
					<li class=""><a href="/partner"><i class="ion-minus arrow"></i>제휴</a></li>
					<li class=""><a href="/ad"><i class="ion-minus arrow"></i>광고</a></li>
					<li class=""><a href="http://developers.faeple.com"><i class="ion-minus arrow"></i>개발자</a></li>
				</ul>
			</li>
		</ul>
		<c:if test="${!empty userDto}">
			<div style="padding: 12px 0;text-align:center;font-size:14px;">
				<a href="/settings"><i class="fa fa-cog" style="margin-right:14px;"></i>계정설정</a><span style="color:#7a7a7a;padding:0 6px;">│</span>
				<a href="#" onclick="logout()"><i class="fa fa-power-off" style="margin-right:14px;"></i>로그아웃</a>
			</div>
		</c:if>
	</div>
    </div>
    
    
	<!-- login dialog -->
	<div class="modal fade" id="login-dialog" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1200;">
		<div class="modal-dialog" style="max-width: 350px;">
			<div class="modal-content">
				<form id="login-form">
				<div id="modal-login">
					<div style="padding: 15px;">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
			        <h4 class="modal-title"><spring:message code="head.login"/></h4>
			        <div>
			        	<button type="button" class="btn btn-facebook btn-lg btn-block" title="<spring:message code="head.login.fb"/>" onclick="fb_login(this);" style="position: relative; border-radius:2px; font-size: 16px;"><span style="position: absolute; left:15px; top:11px; font-size: 16px;"><i class="fa fa-facebook fa-lg"></i></span><spring:message code="head.login.fb"/></button>
			        	<button type="button" class="btn btn-instagram btn-lg btn-block" title="<spring:message code="head.login.instagram"/>"  onclick="window.open('https://api.instagram.com/oauth/authorize/?client_id=1211a537d5c444c8a06c8d73bdc93bc6&redirect_uri=http://faeple.com/connectInstgram&response_type=code','Instagram','resizable=no width=500 height=380 scrollbars=yes')" style="position: relative; border-radius:2px; font-size: 16px;"><img src="/resources/img/instagram-icon.png" width="20" height="20" style="position: absolute; left:15px;"><spring:message code="head.login.instagram"/></button>
			        	<button type="button" class="btn btn-twitter btn-lg btn-block" title="<spring:message code="head.login.twitter"/>" onclick="window.open('/twitterLogin','twitter','resizable=no width=720 height=430')" style="position: relative;border-radius:2px; font-size: 16px;"><span style="position: absolute; left:15px; top:11px;"><i class="fa fa-twitter fa-lg"></i></span><spring:message code="head.login.twitter"/></button>
			        	<button type="button" class="btn btn-kakao btn-lg btn-block" title="<spring:message code="head.login.kakao"/>" onclick="loginWithKakao(this);" style="position: relative;border-radius:2px; font-size: 16px;"><img src="/resources/img/kakao-icon.gif" width="20" height="20" style="position: absolute; left:15px;"><spring:message code="head.login.kakao"/></button>
			        </div>
					</div>
					<div class="login-line"><span style="position:relative;top:-9px;background-color:white;padding:0 10px;color:#808080;font-size:13px;"><spring:message code="common.or"/></span></div>
					<div class="modal-body" style="padding-bottom: 3px;">
						<input type="text" class="form-control" id="loginUser" name="loginUser" placeholder="<spring:message code="head.login.id"/>" title="<spring:message code="head.login.id"/>" tabindex="1" autofocus="autofocus" style="margin-bottom: 5px;">
						<input type="password" class="form-control" id="loginPassword" name="loginPassword" placeholder="<spring:message code="head.login.passwd"/>" title="<spring:message code="head.login.passwd"/>" tabindex="2" onkeypress="if (event.keyCode == 13) { login(); }">
						<div class="checkbox" style="padding-left:0;"><label title="<spring:message code="head.login.remember"/>"><input type="checkbox" id="autologin" name="autologin"><span class="input-label-text"><spring:message code="head.login.remember"/></span></label></div>
					</div>
					<div class="login-line"></div>
					<div style="padding: 15px;">
						<p style="float: left; text-align: left; color: #6D6D6D; line-height: 165%;"><strong><span onclick="recovery();" style="cursor: pointer;"><spring:message code="head.login.forgotpw"/></span><br><a href="/signup" style="color: #6D6D6D; text-decoration: none;"><spring:message code="head.login.signup"/></a></strong></p>
						<button type="button" id="loginBtn" style="float: right; width: 88px; border-radius:0;" class="btn btn-primary btn-lg" onclick="login();"><spring:message code="head.login"/></button>
						<div class="clearfix"></div>
					</div>
				</div>
				<div id="modal-recovery" style="display: none;">
					<div style="padding: 15px;">
			        	<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
			        	<h4 class="modal-title"><spring:message code="head.login.forgotpw"/></h4>
					</div>
					<div style="padding: 15px;" id="recovery-step">
						<p><spring:message code="head.login.forgotpw.email"/></p>
						<input type="text" class="form-control" id="InputRecoveryEmail" name="InputRecoveryEmail" placeholder="이메일" title="이메일" tabindex="1" autofocus="autofocus" style="margin-bottom: 25px;">
						<div style="text-align: right;">
							<button type="button" class="btn btn-primary" onclick="recoveryPasswd(this);"><spring:message code="common.send"/></button>
							<button type="button" class="btn btn-default" data-dismiss="modal"><spring:message code="common.cancel"/></button>
						</div>
					</div>
					<div style="padding: 15px;" id="recovery-execute">
						<div class="recovery-execute-message"></div>
						<div style="text-align: center;"><button type="button" class="btn btn-success btn-block" data-dismiss="modal"><spring:message code="common.confirm"/></button></div>
					</div>
				</div>
				</form>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	<!-- login dialog -->

    <div id="scrollTop" title="<spring:message code="common.scroll_top"/>" onclick="$('html, body').animate({scrollTop: 0}, 500);">
		<i style="color:#a6a6a6; font-weight: 400; font-size: 24px;" class="fa fa-chevron-up"></i>
	</div>
    
    <form id="kakao-form" method="post" action="/kakaoLogin">
   		<input type="hidden" id="kakao-idx" name="kakao-idx" value="">
   		<input type="hidden" id="kakao-nickname" name="kakao-nickname" value="">
   		<input type="hidden" id="kakao-profile_image" name="kakao-profile_image" value="">
   	</form>
    
<c:if test="${userDto ne null}">
    <!-- 글쓰기 -->
    <div class="modal fade" id="write-dialog" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog" style="max-width: 710px;">
			<div class="modal-content">
				<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
			        <h4 class="modal-title"><spring:message code="post.upload.write"/></h4>
				</div>
				<div class="modal-body" style="padding-bottom: 0;">
					<div id="write-step1-form">
						<form id="img-form" method="post" enctype="multipart/form-data" action="/imgUpload">
							<div class="form-group">
								<label><spring:message code="post.upload.photo" text="사진" /></label><span style="font-size: 12px; margin-left: 5px; color: #ccc;">(<span id="uploadImageSize">0</span>/8)</span>
								<div class="imageUpload">
									<div id="imagePreview"></div>			
									<div id="imageUploadBtn" title="<spring:message code="post.upload.image"/>"><i class="icon ion-images"></i><input type="file" id="images" name="images" onchange="imagePreview(this)" accept="image/*" multiple="multiple"></div>
								</div>
								<input type="submit" class="btn btn-success btn-lg btn-block" id="catchImgUploadBtn" style="display: none;" title="<spring:message code="post.upload.btn_image"/>" value="<spring:message code="post.upload.btn_image"/>">
								<div style="clear: both;"></div>
								<div class="write-message-popup" id="write-guide-message1">이미지 아이콘을 클릭해 사진을 추가하세요<br>사진은 최대 8장까지 업로드가 가능합니다</div>
							</div>
						</form>
						<div style="text-align:right;">
<!-- 							<div class="tooltip top in"><div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">다음버튼을 눌러 진행하세요</div></div> -->
<!-- 							<div class="write-message-popup" id="write-guide-message2" style="display:none;">이미지 업로드가 완료되었으면 다음버튼을 눌러 진행해주세요</div> -->
							<button type="button" class="btn btn-primary" style="display:none;" onclick="writeStep('next');" id="writeNextStepBtn">다음</button>
						</div>
					</div>
					<div id="write-step2-form" style="display:none;">
						<form id="write-form" method="post" action="/postWrite">
							<input type="hidden" class="currentposition" id="image1" name="image1">
							<input type="hidden" class="currentposition" id="image2" name="image2">
							<input type="hidden" class="currentposition" id="image3" name="image3">
							<input type="hidden" class="currentposition" id="image4" name="image4">
							<input type="hidden" class="currentposition" id="image5" name="image5">
							<input type="hidden" class="currentposition" id="image6" name="image6">
							<input type="hidden" class="currentposition" id="image7" name="image7">
							<input type="hidden" class="currentposition" id="image8" name="image8">
							<%-- <div class="form-group">
								<label for="inputTitle"><spring:message code="post.upload.title"/></label>
								<input class="form-control" type="text" id="inputTitle" name="inputTitle" placeholder="<spring:message code="post.upload.title_ph"/>" maxlength="60">
							</div> --%>
							<div class="form-group write-m-w" style="position: relative;">
								<label for="inputContent"><spring:message code="post.upload.description" text="설명" /></label><span id="content-length" style="margin-left:15px; font-size: 12px; color: #ccc;display: none;">0</span><span style="font-size: 12px; color: #ccc;display:none;">/400</span>
								<textarea class="form-control expand" rows="5" id="inputContent" name="inputContent" style="resize:none;" maxlength="399" placeholder="내용을 입력해 주세요"></textarea>
								<input type="hidden" id="tagUser" name="tagUser" value="">
								<i class="fa fa-smile-o" style="position: absolute;bottom:5px; right:5px; color: #ccc; font-size: 21px; cursor: pointer;" title="<spring:message code="common.emoticon"/>" id="write-emoji-btn"></i>
							</div>
							<div class="write-message-popup" id="write-guide-message3" style="margin-bottom:25px;">#해시태그를 입력하거나, @사용자를 언급해보세요.<br>예) #데일리룩, @faeple</div>
							<input type="hidden" name="selectSeason" id="selectSeason" value="1">
							<input type="hidden" name="pw-age" id="pw-age" value="${userDto.age}">
							<div class="form-group" style="clear: both;">
								<c:if test="${userDto.group_type eq 'user'}">
									<label for="inputSource"><spring:message code="post.upload.source"/></label>
								</c:if>
								<c:if test="${userDto.group_type eq 'seller'}">
									<label for="inputSource"><spring:message code="post.upload.buylink"/></label>
								</c:if>
								<input class="form-control" type="text" id="inputSource" name="inputSource" placeholder="<spring:message code="post.upload.source_ph"/>" maxlength="100">
							</div>
							<div class="form-group">
								<label for="post-category"><spring:message code="post.upload.category" text="카테고리" /></label><br>
								<select class="selectpicker show-tick" id="post-category" name="post-category" title="<spring:message code="common.select"/>" data-width="160px">
									<option value="w_clothes"><spring:message code="categoryView.w_clothes" text="여성의류" /></option>
									<option value="w_footwear"><spring:message code="categoryView.w_footwear" text="여성신발" /></option>
									<option value="w_bag"><spring:message code="categoryView.w_bag" text="여성가방" /></option>
									<option value="w_accessory"><spring:message code="categoryView.w_accessory" text="여성악세사리" /></option>
									<option value="w_beauty"><spring:message code="categoryView.w_beauty" text="여성뷰티" /></option>
								</select>
								<label title="<spring:message code="common.women" text="여성" />" style="margin-left:10px;"><input type="radio" name="gender" id="gender" value="womens"><span class="input-label-text"><spring:message code="common.women" text="여성" /></span></label>
								<label title="<spring:message code="common.men" text="남성" />"><input type="radio" name="gender" id="gender" value="mens"><span class="input-label-text"><spring:message code="common.men" text="남성" /></span></label>
							</div>
							<input type="hidden" value="" id="inputColor" name="inputColor">
							<%-- <div class="form-group" id="color-form">
								<p><strong><spring:message code="post.upload.color"/></strong></p>
								<div id="colorPicker">
									<input type="hidden" value="none" id="inputColor" name="inputColor">
									<div title="<spring:message code="post.upload.color_black"/>" data-color="black" style="background-color:black;"></div>
									<div title="<spring:message code="post.upload.color_white"/>" data-color="white" style="background-color:white;"></div>
									<div title="<spring:message code="post.upload.color_blue"/>" data-color="blue" style="background-color:blue;"></div>
									<div title="<spring:message code="post.upload.color_skyblue"/>" data-color="skyblue" style="background-color:skyblue;"></div>
									<div title="<spring:message code="post.upload.color_yellow"/>" data-color="yellow" style="background-color:yellow;"></div>
									<div title="<spring:message code="post.upload.color_red"/>" data-color="red" style="background-color:red;"></div>
									<div title="<spring:message code="post.upload.color_gray"/>" data-color="gray" style="background-color:gray;"></div>
									<div title="<spring:message code="post.upload.color_beige"/>" data-color="beige" style="background-color:beige;"></div>
									<div title="<spring:message code="post.upload.color_green"/>" data-color="green" style="background-color:green;"></div>
									<div title="<spring:message code="post.upload.color_brown"/>" data-color="brown" style="background-color:brown;"></div>
									<div title="<spring:message code="post.upload.color_purple"/>" data-color="purple" style="background-color:purple;"></div>
									<div title="<spring:message code="post.upload.color_pink"/>" data-color="hotPink" style="background-color:HotPink;"></div>
									<div title="<spring:message code="post.upload.color_mint"/>" data-color="mint" style="background-color:MediumAquaMarine"></div>
								</div>
							</div> --%>
							<%-- <div class="form-group" style="clear: both;">
								<label><spring:message code="post.upload.tag"/></label>
								
							</div> --%>
							<input class="form-control" type="hidden" id="inputTag" name="inputTag" tabindex="-1" placeholder="<spring:message code="post.upload.tag_ph"/>">
							<div class="form-group">
								<p><strong><spring:message code="post.upload.privacy" text="공개여부" /></strong></p>
								<label title="<spring:message code="post.upload.privacy_all" text="모두" />"><input type="radio" name="radioPrivacy" id="radioPrivacy" value="2" checked="checked"><span class="input-label-text"><spring:message code="post.upload.privacy_all" text="모두" /></span></label>
								<label title="<spring:message code="post.upload.privacy_follower" text="팔로워만" />"><input type="radio" name="radioPrivacy" id="radioPrivacy" value="1"><span class="input-label-text"><spring:message code="post.upload.privacy_follower" text="팔로워만" /></span></label>
								<label title="<spring:message code="post.upload.privacy_me" text="나만보기" />"><input type="radio" name="radioPrivacy" id="radioPrivacy" value="0"><span class="input-label-text"><spring:message code="post.upload.privacy_me" text="나만보기" /></span></label>
							</div>
							<div style="height:45px;width:100%;margin-top:10px;padding-top:15px;border-top:1px solid #eee;">
								<button type="button" class="btn btn-default" style="float:left;" onclick="writeStep('prev');">이전</button>
								<button type="button" class="btn btn-success" style="float:right;" onclick="postWrite()" id="postWriteBtn" title="<spring:message code="post.upload.submit"/>"><spring:message code="post.upload.submit"/></button>
							</div>
						</form>
					</div>
				</div>
				<div class="modal-footer" style="border-top:0;margin-top:0;padding:0 15px 15px 15px;">
				    <div class="progress progress-striped active" id="progressBar" style="display: none; height: 45px;">
						<div class="progress-bar" role="progressbar" aria-valuemax="100" style="width: 0%"></div>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
    <!-- 글쓰기 -->
    
    <!-- 알림창 -->
    <div class="modal fade" id="notifications-modal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1200;">
		<div class="modal-dialog" style="max-width: 600px;">
			<div class="modal-content">
				<form id="f" method="post">
				<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
			        <h4><spring:message code="head.notifications"/></h4>
				</div>
				<div class="modal-body" style="max-height:600px;overflow-y: auto;">
					<ul id="notification-list">
					</ul>
					<div id="notifications-loading" style="width: 100%; text-align: center; padding: 15px 0;"><img src="/resources/img/loading-20x20-white.gif" /></div>
					<div id="more-notification" style="text-align: center; margin-top:20px; display: none;"><button type="button" class="btn btn-default" onclick="noti_index += 8; getNotiList();">더 불러오기</button></div>
					<div id="noti-not-message" style="display: none;"><p style='text-align: center; font-weight:bold;'>표시할 알림이 없습니다</p></div>
					<div id="noti-fail-message" style="display: none;"><p style='text-align: center;'>알림을 가져오는대 실패하였습니다 다시 시도해주세요</p></div>
				</div>
				<div style="border-top:0;margin-top:0;padding:0 15px 45px 15px;">
					<button title="알림비우기" type="button" onclick="notiClear();" id="clearNoti" class="btn btn-default btn-sm" style="position: absolute; left: 15px;"><i class="fa fa-trash-o"></i></button>
					<span style="position: absolute; right: 15px;" title="알림설정"><a href="/settings#notifications" class="btn btn-default btn-sm"><i class="fa fa-cog" style="font-size: 14px; color: #777"></i></a></span>
				</div>
				</form>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	<!-- 알림창 -->
</c:if>